<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .test {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: width 4s ease-in-out 1s, height 2s ease-in-out 1s, background-color 2s ease-in-out 1s;
            -webkit-transition: width 4s ease-in-out 1s, height 2s ease-in-out 1s, background-color 2s ease-in-out 1s;
            -o-transition: width 4s ease-in-out 1s, height 2s ease-in-out 1s, background-color 2s ease-in-out 1s;
        }

        .test:hover {
            width: 400px;
            height: 300px;
            background-color: orange;
        }
    </style>

    <style>
        .box {
            border-style: solid;
            border-width: 1px;
            display: block;
            width: 100px;
            height: 100px;
            background-color: #0000FF;
            -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
            transition: width 2s, height 2s, background-color 2s, transform 2s;
        }

        .box:hover {
            background-color: #FFCCCC;
            width: 200px;
            height: 200px;
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
    </style>
</head>

<body>

    <div class="test"></div>

    <body>
        <p>盒子的多个属性一起动画: width, height, background-color, transform. 将光标悬停在盒子上查看动画。</p>
        <div class="box"></div>
    </body>

</body>

</html>

<!-- CSS 变换 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions -->
<!-- CSS Transitions 是一个 CSS 模块，定义了如何创建一个平滑地变换 CSS 属性值的方法。它不仅允许创建变换方法，同时也允许通过定时函数来控制变换方法。 -->

<!-- 使用 CSS transitions -->
<!-- CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。 -->
<!-- CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing function，比如匀速地或先快后慢)。 -->

<!-- 定义过渡 -->
<!-- CSS 过渡 由简写属性 transition 定义是最好的方式，可以避免属性值列表长度不一，节省调试时间。 -->
<!-- transition-property -->
<!-- 指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。 -->
<!-- transition-duration -->
<!-- 指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。 -->
<!-- transition-timing-function -->
<!-- 指定一个函数，定义属性值怎么变化。缓动函数 Timing functions 定义属性如何计算。多数 timing functions 由四点定义一个 bezier 曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。 -->
<!-- transition-delay -->
<!-- 指定延迟，即属性开始变化时与过渡开始发生时之间的时长。 -->

<!-- transition-property -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-property -->
<!-- transition-property 指定应用过渡属性的名称。 -->
<!-- none -->
<!-- 没有过渡动画。 -->
<!-- all -->
<!-- 所有可被动画的属性都表现出过渡动画。 -->
<!-- IDENT -->
<!-- 属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。 -->

<!-- transition-duration -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-duration -->
<!-- transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。 -->
<!-- 可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。 -->
<!-- <time> -->
<!-- <time> 类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。 -->

<!-- transition-timing-function -->
<!-- CSS属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。 -->
<!-- 这条加速度曲线被<timing-function> (en-US)所定义，之后作用到每个CSS属性的过渡.  -->
<!-- 你可以规定多个timing function,通过使用 transition-property属性，可以根据主列表(transition property的列表)给每个CSS属性应用相应的timing function.如果timing function的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果timing function比主列表要多，timing function函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。 -->
<!-- <timing-function> -->
<!-- 通过transition-property中定义被过渡属性，每个 <timing-function> (en-US)的值代表与这个属性相对应的timing function. -->

<!-- transition-delay -->
<!-- CSS的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。 -->
<!-- 值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。 -->
<!-- 你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性（transition-property） -->

<!-- transition -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition -->
<!-- transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。 -->
<!-- transition: <property> <duration> <timing-function> <delay>; -->
<!-- transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。 -->
<!-- 每个单属性转换都描述了应该应用于单个属性的转换（或特殊值all和none）。 这包括： -->
<!-- 零或一个值，表示转换应适用的属性。 这可能是以下任何一种： -->
<!-- 关键字none -->
<!-- 关键字all -->
<!-- 命名 CSS 属性的 <custom-ident> 。 -->
<!-- 零或一个 <single-transition-timing-function> (en-US) 值表示要使用的过渡函数 -->
<!-- 零，一或两个 <time> 值。可以解析为时间的第一个值被分配给 transition-duration，并且可以解析为时间的第二个值被分配给transition-delay。 -->
<!-- 我的理解：transition每组属性的值的顺序不唯一。区分方法是，如果给出的值属于某一种属性，则赋值为该属性的值；对于时间类型，则根据duration和delay的顺序来复制。 -->